<template>
  <el-dialog :visible.sync="dialogFormVisible" width="70%" :append-to-body="true" :close-on-click-modal="false" center>
    <template slot="title">
      <span class="add-main-tital">
        <h4>物资分发</h4>
      </span>
    </template>
    <div class="add-container">

      <div class="add-main">

        <div class="add-main-list">
          <!-- <div class="list-button-group">
            <div class="button-item">
              <el-button type="primary" icon="el-icon-plus">
                整体选择库房
              </el-button>
            </div>

            <div class="button-item">
              <el-button type="primary" icon="el-icon-share">
                拆分
              </el-button>
            </div>
            <div class="button-item">
              <el-button type="success" icon="el-icon-s-check">
                分发确认
              </el-button>
            </div>
          </div> -->
          <div class="table-list">
            <div class="table-type-title">出库物资汇总</div>
            <ux-grid border show-overflow ref="plxTable" keep-source :height="tabheight" :highlightCurrentRow="false"
              widthResize>
              <ux-table-column type="index" title="序号" width="50"></ux-table-column>
              <!-- <ux-table-column field="kufangmc" title="库房名称"></ux-table-column> -->
              <ux-table-column field="wuzimc" title="物资名称"></ux-table-column>
              <ux-table-column field="guigexh" title="规格型号">
              </ux-table-column>
              <ux-table-column field="wuzisl" title="物资数量"></ux-table-column>
              <!-- <ux-table-column field="fenfasl" title="分发数量" width="140" :edit-render="{ autofocus: '.el-input__inner' }">
                <template v-slot:edit="scope">
                  <el-input v-model="scope.row.fenfasl" type="number" :min="0" placeholder="请输入"></el-input>
                </template>
              </ux-table-column> -->
              <ux-table-column field="picih" title="批次号"></ux-table-column>
              <ux-table-column show-overflow-tooltip field="shengchanrq" title="生产日期"></ux-table-column>
              <ux-table-column show-overflow-tooltip field="shengchancj" title="生产厂家">
              </ux-table-column>
            </ux-grid>
            <div class="table-type-title">选择库房</div>
            <ux-grid border show-overflow ref="plxTablehz" keep-source :height="tabheighthz" :highlightCurrentRow="false"
              widthResize :rules="rules" :validConfig="{ autoPos: true }" @selection-change="selectChange"
              :edit-config="{ trigger: 'click', mode: 'cell' }">
              <ux-table-column type="checkbox" width="50" />
              <ux-table-column type="index" title="序号" width="50"></ux-table-column>
              <ux-table-column field="kufangmc" title="库房名称"></ux-table-column>
              <ux-table-column field="wuzimc" title="物资名称"></ux-table-column>
              <ux-table-column field="guigexh" title="规格型号">
              </ux-table-column>
              <ux-table-column field="cangkusl" title="仓库数量"></ux-table-column>
              <ux-table-column field="wuzisl" title="分发数量" width="140" :edit-render="{ autofocus: '.el-input__inner' }">
                <template v-slot:edit="scope">
                  <el-input v-model="scope.row.wuzisl" type="number" placeholder="请输入"></el-input>
                </template>
              </ux-table-column>
              <ux-table-column field="picih" title="批次号"></ux-table-column>
              <ux-table-column show-overflow-tooltip field="shengchanrq" title="生产日期"></ux-table-column>
              <ux-table-column show-overflow-tooltip field="shengchancj" title="生产厂家">
              </ux-table-column>
            </ux-grid>
          </div>
        </div>
      </div>
      <page-2-add-wuzi ref="wuzi-dialog" @fetch-data="fetchData" :formData="ruleForm"></page-2-add-wuzi>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button size="medium" type="primary" icon="el-icon-s-check" @click="save">
        确定
      </el-button>
      <el-button size="medium" icon="el-icon-delete" @click="close">
        取 消
      </el-button>

    </span>
  </el-dialog>
</template>
<script>
import { GetChukudbdPageByid, CkdbdFf, Ckdbdfkcmx } from '@/api/exwarehouse'
import Upload from '@/components/Upload/upload'
import page2AddWuzi from './page2AddWuzi.vue'
export default {
  name: 'page2Fenfa',
  components: { Upload, page2AddWuzi },
  data() {
    return {
      show: true,
      ruleForm: {},
      ruleFormhz: [],
      rules: {
        fenfasl: [{ required: true, message: '请输入数量', trigger: 'blur' }]
      },
      tabheight: 250,
      tabheighthz: 500,
      importShow: false,
      dialogFormVisible: false
    }
  },
  created() { },
  mounted() {
    // this.ruleForm = Object.assign({}, this.datarow)
    // console.log(this.ruleForm);
  },
  methods: {
    async showEdit(row) {
      let { data } = await GetChukudbdPageByid({ id: row.id })
      this.ruleForm = data
      this.getkfwz()
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs.plxTable.reloadData(this.ruleForm.chukudbdmxList)
      })
    },
    close() {
      this.dialogFormVisible = false
    },
    save() {
      // this.ruleFormhz = this.$refs.plxTablehz.getTableData().fullData
      const mxLen = this.$refs.plxTablehz.getUpdateRecords()
      console.log(mxLen);
      if (mxLen.length == 0) {
        this.$message({
          message: '请选择出库物资',
          type: 'warning',
        });
        return;
      }
      this.$refs.plxTablehz.validate(true).then(async (data) => {
        if (data) {
          // 有错误
        }
        else {
          // 验证通过
          let { data } = await CkdbdFf(mxLen)
          this.$message({
            message: "分发成功",
            type: 'success',
          });
          this.$emit('fetch-data')
          this.close()
        }
      })

    },
    DialogOpenWuzi(row) {
      this.$refs['wuzi-dialog'].showEdit(row)
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    selectChange(e) { },
    // 添加插入行
    async insertEvent(row) {
      let record = this.insertData
      // 加入行, 表示加入行的row对象，row为空则插入第一行，为-1插入最后一行
      let { row: newRow } = await this.$refs.plxTablehz.insertRow(record)
      // 激活单元格编辑
      await this.$refs.plxTablehz.setActiveRow(newRow)
    },
    delwzDetail() {
      this.$refs.plxTablehz.remove(this.$refs.plxTablehz.getCheckboxRecords())
    },
    uploadSuccess() {
      this.importShow = false
    },
    oninput(num) {
      return num.replace(/\D/g, '')
    },
    async getkfwz() {
      let ids = []
      this.ruleForm.chukudbdmxList.forEach((item) => {
        ids.push(item.wuziid)
      })
      let formdata = {

        wuziids: ids.join(','),
        wuziqfid: this.ruleForm.chukudbdmxList[0].wuziqfid,
        zhuguandwid: this.ruleForm.chukudbdmxList[0].zhuguandwid,
      }
      let { data } = await Ckdbdfkcmx(formdata)
      this.insertData = []
      data.forEach(item => {
        this.insertData.push({
          wuzibm: item.wuzibm,
          wuzimc: item.wuzimc,
          wuziid: item.wuziid,
          guigexh: item.guigexh,
          picih: item.picih,
          cangkusl: item.shuliang,
          shengchancj: item.shengchancj,
          shengchanrq: item.shengchanrq,
          kufangid: item.kufangid,
          kufangmc: item.kufangmc,
          chukudbdid: this.ruleForm.id
        })
      });
      this.$nextTick(() => {
        this.$refs.plxTablehz.reloadData(this.insertData)
      })
    },
    fetchData(data) {
      this.insertData = []
      data.forEach(item => {
        this.insertData.push({
          wuzibm: item.wuzibm,
          wuzimc: item.wuzimc,
          wuziid: item.wuziid,
          guigexh: item.guigexh,
          picih: item.picih,
          cangkusl: item.shuliang,
          shengchancj: item.shengchancj,
          shengchanrq: item.shengchanrq,
          kufangid: item.kufangid,
          kufangmc: item.kufangmc,
          chukudbdid: this.ruleForm.id
        })
      });
      this.insertEvent();
    }
  },
}
</script>
<style lang="scss" scoped>
.add-container {

  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: #f6f8f9;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  .add-top {


    ::v-deep .el-page-header__title {
      font-size: 16px !important;
    }
  }

  .add-main {
    flex: 1;
    font-weight: bold;
    display: flex;
    flex-direction: column;

    .add-main-top {
      padding: 20px;
      background: #fff;
      border-radius: 5px;

      .add-main-tital {
        font-size: 18px;
        border-left: 10px solid rgb(121, 189, 255);
        padding-left: 10px;

        p {
          margin: 0;
        }
      }

      .search-gropu-item {
        margin-top: 20px;
        width: 90%;
        display: flex;
        // label {
        //   white-space: nowrap;
        //   line-height: 32px;
        //   margin-right: 10px;
        // }
      }

      .el-select {
        width: 100%;
      }
    }

    .add-main-list {
      flex: 1;
      background: #fff;
      box-sizing: border-box;

      .list-button-group {
        display: flex;
        flex-direction: row;
        padding: 15px;

        .button-item {
          padding: 0px 10px;
        }

        .button-item:first-child,
        &:last-child {
          padding: 0px 10px 0 0;
        }
      }
    }

    .el-button {
      font-size: .14rem !important;
    }

    ::v-deep {
      .elx-table--header-wrapper {
        background-color: rgb(233, 243, 255);
      }

      .elx-table {
        font-size: 0.14rem !important;
      }

      .elx-body--column {
        height: .48rem !important;
        line-height: .24rem;
      }

      .elx-header--column {
        background-image: none !important;
        height: .48rem !important;
      }

      .el-date-editor.el-input,
      .el-date-editor.el-input--inner {
        width: 100% !important;
      }

      .el-form-item--small.el-form-item {
        margin-bottom: 0px;
        margin-top: 18px;
      }
    }

    .submit-button {
      margin-top: 20px;
      display: flex;
      justify-content: center;
    }
  }

  .table-type-title {
    background-color: #e9f3ff;
    font-size: 16px;
    line-height: 36px;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
  }
}
</style>